<link href="../plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="../plugins/bootstrap-fontAwesome/css/font-awesome.css">
<style>
    body{
        margin: 0;
        padding: 0;
        font-family: "微软雅黑";
    }
    .index-back{
        background:#0fb0fb url("../images/back.png") no-repeat fixed;
        background-size: 100% 100%;
        height: 100%;
        width: 100%;
        position: relative;
    }
    .index-bottom{
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .index-box{
        width: 1100px;
        margin: 0 auto;
        padding: 15px 0;
    }
    .pannel-main{
        background:#fff;
        border: 1px solid #e5e5e5;
        border-radius: 5px;
        margin-bottom: 15px;
    }
    .pannel-main-title{
        height: 29px;
        line-height: 29px;
        border-bottom: 1px solid #e5e5e5;
        font-size: 14px;
        font-weight:800;
        color: #288ce2;
        padding: 0 20px;
    }
    .pannel-main-title a{
        cursor: pointer;
    }
    .pannel-main-body{
        padding: 15px 15px 15px 15px;
    }
    .padding-left{
        padding-left: 0;
    }
    .list-pannel-title{
        background: #feb43d;
        color: #fff;
        margin-bottom: 3px;
        text-align: center;
        height: 33px;
        line-height: 33px;
        font-size: 20px;
        font-weight: 800;
    }
    .list-pannel-body{
        padding: 10px 0;
        background: #feb43d;
        color: #fff;
        text-align: center;
    }
    .list-pannel-body h3{
        margin: 0;
        padding: 5px 0;
        font-size: 22px;
    }
    .list-pannel-body span{
        font-size: 13px;
        font-weight: 400;
    }
    .bg-b .list-pannel-title{
        background: #1ebfaf;
    }
    .bg-b .list-pannel-body{
        background: #1ebfaf;
    }
    .bg-r .list-pannel-title{
        background: #ff5454;
    }
    .bg-r .list-pannel-body{
        background: #ff5454;
    }
    .padding-left{
        padding-left: 0;
    }
    .pannel-table{
        width: 100%;
    }
    .pannel-table th{
        height: 46px;
        line-height: 46px;
        border-bottom: 1px solid #eee;
        font-weight: normal;
        color: #0077d6;
        font-size: 15px;
        text-align: center;
    }
    .pannel-table td{
        color: #8895a9;
        font-size: 15px;
        text-align: center;
        height: 46px;
        line-height: 46px;
    }
    .pannel-table .td-first{
        color:#0077d6;
        text-align: center;
    }
    .pannel-table .td-chird{
        text-align: center;
    }
    .mess-pannel{
        padding:0 15px;
        height: 44px;
        line-height: 44px;
        background: #ffddb1;
        color: #000;
        border-radius: 5px;
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 600;
    }
</style>

<div class="index-back"  ng-controller="monitorCtrl">
    <audio id="alarm" src="audio/alarm.mp3" controls="controls" hidden></audio>
    <div class="index-box">
        <div class="row">
            <div class="col-xs-8">
                <div class="pannel-main">
                    <div class="pannel-main-title clearfix">
                        <img src="images/icon1.png">
                        数据看板【{{dataSet.dateTime}}】,{{updateText}}
                        <a class="pull-right"><img src="images/icon4.png"></a>
                    </div>
                    <div class="pannel-main-body">
                        <div class="row">
                            <div class="col-xs-4">
                                <div class="list-pannel">
                                    <div class="list-pannel-title">
                                        今日累计
                                    </div>
                                    <div class="list-pannel-body">
                                        <h3>{{dataSet.dayPaySum}}</h3>
                                        <span>交易额</span>
                                        <h3>{{dataSet.daySubsidySum}}</h3>
                                        <span>补贴额</span>
                                        <h3>{{dataSet.dayTotalSum}}</h3>
                                        <span>总金额</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-4 padding-left">
                                <div class="list-pannel bg-b">
                                    <div class="list-pannel-title">
                                        本周累计
                                    </div>
                                    <div class="list-pannel-body">
                                        <h3>{{dataSet.weekPaySum}}</h3>
                                        <span>交易额</span>
                                        <h3>{{dataSet.weekSubsidySum}}</h3>
                                        <span>补贴额</span>
                                        <h3>{{dataSet.weekTotalSum}}</h3>
                                        <span>总金额</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-4 padding-left">
                                <div class="list-pannel bg-r">
                                    <div class="list-pannel-title">
                                        本月累计
                                    </div>
                                    <div class="list-pannel-body">
                                        <h3>{{dataSet.monthPaySum}}</h3>
                                        <span>交易额</span>
                                        <h3>{{dataSet.monthSubsidySum}}</h3>
                                        <span>补贴额</span>
                                        <h3>{{dataSet.monthTotalSum}}</h3>
                                        <span>总金额</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pannel-main">
                    <div class="pannel-main-title clearfix">
                        <img src="images/icon2.png">
                        排行榜
                        <a class="pull-right"><img src="images/icon4.png"></a>
                    </div>
                    <div class="pannel-main-body" style="padding-top:0;">
                        <table class="pannel-table">
                            <thead>
                            <tr>
                                <th width="15%"></th>
                                <th>总金额排名</th>
                                <th>补贴比排行</th>
                                <th>场馆预订率排行</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="item in dataSet.showList">
                                <td class="td-first">{{item.index}}</td>
                                <td>{{item.totalSum}}</td>
                                <td>{{item.subsidyRate}}</td>
                                <td class="td-chird">{{item.shopBooking}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-xs-4 padding-left">
                <div class="pannel-main">
                    <div class="pannel-main-title clearfix">
                        <img src="images/icon3.png">
                        服务状态【{{monitor.dateTime}}】
                        <a class="pull-right"><img src="images/icon4.png"></a>
                    </div>
                    <div class="pannel-main-body" style="padding-bottom: 5px">
                        <div class="mess-pannel" ng-repeat="m in monitor.serverStatusList">
                            <div>
                                {{m.name}}
                                <span class="pull-right" ng-class="{true:'text-success',false:'text-error'}[m.status=='SUCCESS']">{{m.status=='SUCCESS'?'OK':'Error'}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="index-bottom">
        <img src="images/back-01.png">
    </div>

</div>